<template>
  <el-form label-width="80px">
    <span class="text-info settings-basic-tips">{{$t('settings.basicSettings.dataChangeTips')}}</span>
    <el-form-item :label="$t('settings.basicSettings.language')">
      <app-select :value.sync="settings.lang"
                 @change="(value)=>{select('locale',value)}">
        <app-option v-for="(item) in language"
                   :key="item.code"
                   :value="item.code"
                   :label="item.text"></app-option>
      </app-select>
    </el-form-item>
    <el-form-item :label="$t('settings.basicSettings.skin.title')">
      <app-select :value.sync="settings.skin"
                 @change="(value)=>{select('skin',value)}">
        <app-option :value="item.code"
                   :label="$t('settings.basicSettings.skin.'+item.code)"
                   v-for="(item,index) in skins"
                   :key="index"></app-option>
      </app-select>
    </el-form-item>
  </el-form>
</template>
<script>
import skinUtil from '@/assets/utils/skin'
import AppSelect from '@/components/common/select/AppSelect'
import AppOption from '@/components/common/select/AppOption'
export default {
  data () {
    return {
      settings: {
        lang: localStorage.getItem('locale') || 'zh-CN',
        skin: localStorage.getItem('skin') || 'default'
      },
      language: [
        { code: 'zh-CN', text: '简体中文' },
        { code: 'en-US', text: 'English' },
        { code: 'ja-JP', text: '日本語' }
      ],
      skins: [
        { code: 'blueTheme' },
        { code: 'emeraldTheme' },
        { code: 'steelBlueTheme' }
      ]
    }
  },
  components: { AppSelect, AppOption },
  methods: {
    select (name, value) {
      if (name === 'skin') {
        skinUtil.setTheme(value)
      } else if (name === 'locale') {
        this.$i18n.locale = value
        localStorage.setItem(name, value)
      }
    }
  }
}
</script>
